<template>
  <div>

<!--    标题-->
    <div class="flex align-center justify-center margin-tb">
      <div class="line"></div>
      <div class="title margin-lr-20">挽回成功案例</div>
      <div class="line"></div>
    </div>

    <div class="flex content-wrap">
      <div class="img-area flex">
        <div class="img-item" v-for="item in chatList" :key="item">
          <img :src="item" >
        </div>
      </div>
      <div class="character-area flex justify-end">
        <div style="width: 200px">
          <div><img src="../assets/imgs/qgdstj.png"></div>
          <div><img src="../assets/imgs/whal_jm.png" class="whal_ym"></div>
          <div class="pos-re">
            <img src="../assets/imgs/whal_yy.png" class="whal_ym">

            <div class="weixin-wrap">
              <img src="../assets/imgs/erweima.png" class="ver-middle erweima-img">
              <img src="../assets/imgs/qq.png" class="ver-middle qq-img">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import WzFooter from "@/components/WzFooter";
export default {
  name: "Whal",
  components: {  },
  data(){
    return {
      chatList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.chatList = [
        require("../assets/imgs/slide1.png"),
        require("../assets/imgs/slide2.png"),
        require("../assets/imgs/slide3.png"),
        require("../assets/imgs/slide4.png"),
        require("../assets/imgs/slide5.png"),
        require("../assets/imgs/slide6.png"),
      ]
    },
  }
};
</script>

<style scoped lang="scss">

  .weixin-wrap{
    position: absolute;
    top: 30px;
    left: 40px;

    img:nth-child(1){
      width: 80px;
    }

    img:nth-child(2){
      margin-left: 5px;
      width: 60px;
    }


  }




  .img-item{
    width: 33.33%;

    img{
      width: 220px;
      height: 330px;
    }
  }

  .content-wrap{
    padding: 20px 10%;
    width: 80%;

    .img-area{
      flex-wrap: wrap;
      flex: 3;
    }

    .character-area{
      flex: 2;

      .whal_ym{
        width: 200px;
      }

    }
  }

  .title{
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #9C5DFB;
  }


  .line{
    width: 100px;
    height: 2px;
    background-color: #9C5DFB;
  }
</style>
